<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="showPopup = true">打开</button></button>
        <my-popup v-model="showPopup" closeable></my-popup>
        <!-- <my-popup :value="showPopup" @input="showPopup = $event" closeable></my-popup> -->
    </div>
</body>
<script>
Vue.component('MyPopup', {
    //props写法1-数组
    // props: ['closeable'],
    //props写法2-对象-简单写法
    /*
    props: {
        closeable: Boolean
    },
    */
   //props写法3-对象-标准写法
   props: {
        value: Boolean,
        closeable: {
            type: Boolean,
            // required: true,
            default: true
        }
   },
    template: `
        <div v-if="value">弹层组件
            <div v-if="closeable" @click="$emit('input', false)">关闭</div>    
        </div>
    `
})   
let vm = new Vue({
    el: '#app',
    data(){
        return {
            showPopup: false
        }
    }
})
</script>
</html>